<template>
	<view>
		<scroll-view id="scrollview" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true"
		:style="{height: style.contentH + 'px'}"
		>
			<!-- 聊天列表 -->
			<block v-for="(item, index) in msgList" :key="index">
				<user-chat-list :item="item" :index="index"></user-chat-list>
			</block>
		</scroll-view>
		<!-- 底部发送 输入框-->
		<user-chat-bottom @send="send"></user-chat-bottom>
	</view>
</template>

<script>
	import userChatBottom from '../../components/user-chat/user-chat-bottom.vue';
	import userChatList from '../../components/user-chat/user-chat-list.vue';
	import time from '../../common/time.js';
	export default {
		components:{
			userChatBottom,
			userChatList
		},
		data() {
			return {
				scrollTop: 0,
				style: {
					contentH: 0,
					itemH: 0
				},
				msgList: [
					
				]
			}
		},
		onLoad() {
			this.initData();
			this.getData();
		},
		onReady() {
			this.pageToBottom();
		},
		/* 监听导航按钮点击事件 */
		onNavigationBarButtonTap(e) {
			switch (e.index){
				case 0:
					//左边，跳转到好友列表
					uni.navigateBack({
						delta:1
					})
					break;
				default:
					break;
			}
		},
		methods: {
			// 初始化参数
			initData(){
				try{
					const res = uni.getSystemInfoSync();
					this.style.contentH = res.windowHeight - uni.upx2px(120);
				}catch(e){
					//TODO handle the exception
				}
			},
			// 获取聊天数据
			getData(){
				let arr = [
					{
						isme: false,
						avatar: '../../static/images/avatar/nan1.jpg',
						type: 'text',
						data: '我是你的优乐美！！！',
						time: '1605169856',
						gstime:'12:00'
					},
					{
						isme: true,
						avatar: '../../static/images/avatar/nv1.jpg',
						type: 'text',
						data: '我是你的巧乐兹！！！',
						time: '1605256437',
						gstime:'12:00'
					},
					{
						isme: true,
						avatar: '../../static/images/avatar/nv1.jpg',
						type: 'image',
						data: '../../static/images/cbd.jpg',
						time: '1605256538',
						gstime:'12:00'
					},
					{
						isme: false,
						avatar: '../../static/images/avatar/nan1.jpg',
						type: 'text',
						data: '金鸡湖好漂亮！！！你居然不带我',
						time: '1605256545',
						gstime:'12:00'
					},
				];
				for(let i = 0; i < arr.length; i ++){
					arr[i].gstime = time.gettime.getChatTime(arr[i].time, i > 0 ? arr[i-1].time : 0)
				}
				this.msgList = arr;
			},
			/* 发送消息 */
			send(text){
				if(text){
					let now = new Date().getTime();
					let obj = {
						isme: true,
						avatar: '../../static/images/avatar/nv1.jpg',
						type: 'text',
						data: text,
						time: now,
						gstime: time.gettime.getChatTime(now, this.msgList[this.msgList.length - 1].time)
					}
					this.msgList.push(obj);
					this.pageToBottom();
				}else{
					uni.showToast({
						title: '不能发送空数据',
						position: 'bottom'
					})
				}
			},
			pageToBottom(){
				// 获取节点
				let q = uni.createSelectorQuery();
				q.select('#scrollview').boundingClientRect();
				q.selectAll('.user-chat-item').boundingClientRect();
				
				q.exec((res) => {
					res[1].forEach((ret) => {
						this.style.itemH += ret.height;
					});
					
					if(this.style.itemH > this.style.contentH){
						this.scrollTop = this.style.itemH
					}
				})
			}
		}
	}
</script>

<style>
	
</style>
